<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<style type="text/css">
			.media-wrap {
				position: relative;
				overflow: hidden;
			}
			
			.order-status {
				position: absolute;
				right: 10px;
				top: 20px;
			}
			
			.mui-table-view .mui-media,
			.mui-table-view .mui-media-body {
				font-size: 14px;
			}
			.mui-table-view .mui-media-body,.mui-table-view .mui-media-title{
				padding: 10px 0px;
			}
			.mui-table-view .mui-media-object {
				line-height: 42px;
				max-width: 80px;
				height: 80px;
				padding: 10px;
				margin: 5px;
				background: #fff;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
				background-color: white;
			}
			.mui-table-view .mui-media-title{
				padding: 10px 20px;
			}
				.mui-table-view .mui-media-title ~ span{
					top: 10px;
				}
			.no-data{
				padding: 10%;
				text-align: center;
			}
			.no-data p{
				padding: 10px;
			}
			.no-data button{
				width: 50%;
			}
		</style>
	</head>

	<body>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<div class="media-wrap">
					<span class="mui-media-title mui-pull-left">活动图片</span>
					<div class="mui-media-body mui-col-xs-7">
						<p class="mui-ellipsis">抢购日期 / 充值手机 / 活动名称</p>
					</div>
					<span class="order-status">状态</span>
				</div>

			</li>
			
		</ul>
		<div class="no-data">
			<img src="img/nodata.png" width="100" height="100"/>
			<p>现在暂无数据哦</p>
			<button type="button" class="mui-btn mui-btn-outlined">点击刷新</button>
		</div>
	</body>

</html>